<template>
	<view :class="[primarySize()]">
		<view class="page-foot bg-white">
			<view class="flex-box detail_footer">
				<button hover-class="none" open-type="share" class="footer_img1">
					<image src="https://admin.mosizp.cn/static/public/share.png"></image>
					<view class="text">分享</view>
				</button>
				<view class="footer_img1 ml30" @click="bindToggleFav">
                    <image :src="iconPath(isFav?'fav_sc.png':'fav.png')" mode="aspectFill"></image>
					<view class="text">{{isFav?'已':''}}收藏</view>
				</view>
				<view class="foot_btn flex-box flex-col flex-center colf" @click="bindApply()">
					<view class="fs28 lh40">申请接单</view>
					<view class="fs20 lh28">{{isApply?task.auth.mobile:'申请接单后可看到雇主电话'}}</view>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="top_nav">
				<view class="box">
					<image v-if="task.is_bargaining==1" src="https://admin.mosizp.cn/static/public/icon23.png" mode="aspectFill" class="tips"></image>
					<view class="fs24 col6 lh32">{{task.work_start_date}}至{{task.work_end_date}} {{task.work_start_time}}至{{task.work_end_time}}</view>
					<view class="flex-box mt40">
						<view class="flex-grow-1">
							<view class="fs36 fwb col3 lh50">{{task.name}}</view>
							<view class="pt10">
								<view class="label">招<text class="col7 fs28">{{task.plan_count}}</text>人</view>
								<!-- <view class="label">日结</view> -->
								<view class="label">{{task.gender_text}}</view>
							</view>
						</view>
						<view class="col4 fs32 fwb">{{task.budget}}元/{{task.unit_text}}</view>
					</view>
				</view>
			</view>
			<view class="ptb40 plr30">
				<view class="fwb fs34 col0">时间</view>
				<view class="item">
					<text class="pr z2 ">{{task.work_start_time}}至{{task.work_end_time}}</text>
				</view>
				<view class="fwb fs34 col0 mt40">工作地点</view>
				<view class="item">
					<text class="pr z2  ">{{task.address}}</text>
				</view>
				<view class="fwb fs34 col0 mt40">工作内容</view>
				<view class="item">
					<text class="pr z2 ">{{task.requirement}}</text>
				</view>
				<view class="fwb fs34 col0 mt40">雇主信息</view>
				<view class="item">
					<view class="flex-box pr z2">
						<image :src="cdnurl(task.user.avatar)" mode="aspectFill" class="user_img"></image>
						<view class="pl25 flex-grow-1 fs30 fwb col0">{{task.auth.username}}</view>
					</view>
				</view>
				<view class="detail_item flex-box mt55">
					<image src="https://admin.mosizp.cn/static/public/tip.png" mode="aspectFit" class="tip"></image>
					<view class="flex-grow-1 tip_con">
						警示：以招聘为名收取培训费用、提供培训贷款，或在录用过程中需支付体验、服装、押金等费用的，都属违法行为。一经发现，请
						<text @click="bindInformJob">立即举报</text>，并向当地公安机关报案。
					</view>
				</view>
			</view>
		</view>

		<u-popup :show="showTips" mode="center" :safeAreaInsetBottom="false" @close="closeTips" bgColor="transparent">
			<view class="popup">
				<view class="fs34 fwb col3 lh48 tc">是否本人报名</view>
				<view class="flex-box mt60 flex-center">
					<view class="pop_btn1" @click="bindApplyConfirm('other')">否</view>
					<view class="pop_btn2 ml30" @click="bindApplyConfirm('self')">是</view>
				</view>
			</view>

		</u-popup>
		
		<u-popup :show="show1" mode="center" :safeAreaInsetBottom="false" @close="close1" bgColor="transparent">
			<view class="popup">
				<view class="fs34 tc col3 lh48">完善零工求职意向才可以申请零工</view>
				<view class="pop_btn" @click="bindIntention()">立即完善</view>
			</view>
		
		</u-popup>

	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				show1: false,
				showTips: false,
				taskId: 0,
				isFav: false,
				isApply: false,
				isIntention: false,
				task: {
					name: '',
					work_start_time: '',
					work_end_time: '',
					category: [],
					user:{avatar:''},
					budget: '',
					unit_text: '',
					gender_text: '',
					plan_count: 0,
					work_address: '',
					requirement: ''
				}
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad(options) {
			
			this.taskId = options.id;
			this.fetchTaskDetail();
		},
		methods: {
			closeTips() {
				this.showTips = false
			},
			closeShow(){
				this.show1 = false;
			},
			fetchTaskDetail(){
				this.$core.get({url: 'xilujob.task/detail', data: {id: this.taskId},
				  success: ret => {
					this.task = ret.data.task;
					this.isFav = ret.data.is_fav;
					this.isApply = ret.data.is_apply;
					this.isIntention = ret.data.is_intention;
				  }
				});
			},
			bindIntention(){
				this.closeShow();
				uni.navigateTo({
					url: '/pages/user/individual_registration',
					events: {
						taskIntentionTransfer: data=>{
							this.isIntention = true;
						}
					}
				})
			},
			bindApply(){
				if(!this.$core.getUserinfo(true)){
					return;
				}
				let groupId = this.$core.getUserinfo().group_id;
				if(groupId===2){
					uni.showModal({
						title: '提示',
						content: '企业身份不可报名',
						showCancel: false
					});
					return;
				}
				if(this.isApply){
					uni.showModal({
						title: '提示',
						content: '您已申请，请勿重复申请',
						showCancel: false
					});
					return;
				}
				if(this.isIntention){
					this.showTips = true;
				}else{
					this.show1 = true;
				}
			},
			//举报
			bindInformJob() {
			    if(!this.$core.getUserinfo(true)) {
			      return;
			    }
			    uni.navigateTo({url: '/pages/user/report_detail?id='+this.taskId});
			},
			// 收藏
			bindToggleFav() {
			    if(!this.$core.getUserinfo(true)) {
			      return;
			    }
			    let page = this;
			    page.isFav = !page.isFav;
			    this.$core.post({url: '/xilujob.task/toggle_fav',loading:false,data:{task_id: this.taskId},success:(ret) => {
			      page.isFav = ret.data.is_fav;
			    },fail:ret=>{
			      uni.showToast({title: '收藏失败',icon:'none'});
			      page.isFav = !page.data.isFav;
			      return false;
			    }});
			},
			//申请
			bindApplyConfirm(type){
				this.closeTips();
				let data = {
					type: type,
					task_id: this.taskId
				}
				uni.navigateTo({
					url: '/pages/user/odd_job_apply?param='+JSON.stringify(data),
					events:{
						taskEnrollSuccess:data=>{
							this.fetchTaskDetail();
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top_nav {
		background: var(--primary);
		padding: 10rpx 30rpx 20rpx;

		.box {
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 18rpx;
			position: relative;
			padding: 30rpx;

			.label {
				padding: 0 8rpx;
				display: inline-block;
				vertical-align: top;
				margin-right: 10rpx;
				margin-top: 10rpx;
				font-size: 22rpx;
				color: var(--primary);
				height: 32rpx;
				line-height: 32rpx;
				background: rgba(42, 121, 242, .1);
				border-radius: 4rpx;

			}

			.tips {
				position: absolute;
				top: 20rpx;
				right: 0;
				width: 121rpx;
				height: 62rpx;
			}
		}
	}

	.item {
		width: 690rpx;
		min-height: 110rpx;

		font-size: 30rpx;
		color: #000000;
		border: 1px solid var(--primary);
		// background: linear-gradient(270deg, rgba(84, 177, 250, 1), rgba(42, 121, 242, 1));
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(183, 189, 202, 0.3);
		border-radius: 18rpx;
		position: relative;
		margin-top: 20rpx;
		padding: 30rpx;
		// &:before {
		// 	width: calc(100% - 4rpx);
		// 	height: 106rpx;
		// 	content: '';
		// 	background: linear-gradient(0, #FFFFFF 0%, #F8FBFF 100%);
		// 	position: absolute;
		// 	display: block;
		// 	border-radius: 18rpx;
		// 	top: 2rpx;
		// 	left: 2rpx;
		// }

		.user_img {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}

	.detail_item {
		padding: 30rpx;
		margin: 0 auto 30rpx;
		background: #FFF;
		border-radius: 18rpx;
	}

	.describe_tit {
		position: relative;
		font-size: 32rpx;
		color: #000;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.describe_tit::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 136rpx;
		height: 17rpx;
		background: var(--primary);
		opacity: 0.3
	}

	.describe_tit.tit1 {
		margin: 0 0 30rpx;
		font-size: 36rpx;
	}

	.describe_tit.tit1::after {
		width: 149rpx;
		height: 14rpx;
		border-radius: 7rpx;
		background: var(--primary);
		opacity: 0.3
	}


	.describe_small_tit {
		font-size: 28rpx;
		color: #000;
		font-weight: bold;
		padding-top: 20rpx;
		padding-bottom: 10rpx;
	}

	.describe_small_tit image {
		height: 20rpx;
		margin-left: 10rpx;
	}

	.describe_text {
		font-size: 30rpx;
		color: #333;
		line-height: 1.929
	}

	.tip {
		width: 52rpx;
		height: 46rpx;
		display: block
	}

	.tip_con {
		font-size: 22rpx;
		color: #999;
		padding-left: 24rpx;
	}

	.tip_con text {
		color: #FF7B20;
	}

	.mt55 {
		margin-top: 55rpx;
	}

	.detail_footer {
		padding: 14rpx 30rpx;
		background-color: #fff;
	}

	.footer_img1 {
		width: 80rpx;
	}

	.footer_img1 .text {

		font-size: 24rpx;
		color: #555555;
		line-height: 26rpx;
		text-align: center;
	}

	.footer_img1 image {
		width: 44rpx;
		height: 44rpx;
		display: block;
		margin: 0 auto 4rpx
	}

	.foot_btn {
		width: 502rpx;
		height: 86rpx;
		background: var(--primary);
		border-radius: 8rpx;
		margin-left: 30rpx;
	}

	.popup {
		width: 615rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
		border: 1px solid #979797;
		padding: 65rpx 60rpx 40rpx;

		.mt60 {
			margin-top: 60rpx;
		}

		.pop_btn1 {
			width: 236rpx;
			height: 98rpx;
			line-height: 98rpx;
			text-align: center;
			font-size: 30rpx;
			color: #FFFFFF;
			background: var(--primary);
			border-radius: 8rpx;
		}

		.pop_btn2 {
			width: 236rpx;
			height: 98rpx;
			line-height: 98rpx;
			text-align: center;
			font-size: 30rpx;
			color: #FFFFFF;
			background: #FF8B3B;
			border-radius: 8rpx;
		}

		.pop_btn {
			font-size: 30rpx;
			color: #FFFFFF;
			margin-top: 60rpx;
			width: 478rpx;
			height: 98rpx;
			background: var(--primary);
			border-radius: 8rpx;
			line-height: 98rpx;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
		}
	}
</style>